<template>
  <div class="menu">
    <div v-for="(item ,index) in menus" :key="index" class="lang">
      <span v-if="item.children.length >0">
        <div>{{item.meta.title}}</div>
        <span v-for="(it,index) in item.children" :key="index">
          <span v-if="it.component =='ParentView'" class="button" @click="gotoweb(it)"> {{it.meta.title}}</span>
          <span v-else @click="goto(item,it)" class="button">{{it.meta.title}}</span>
        </span>
      </span>
    </div>
  </div>
</template>

<script>
import { getRouters } from '@/api/menu'
export default {
  name: "Index",
  data() {
    return {
      menus:[{
        meta:'您没有获取到任务菜单权限，请联系管理员',
        children:[{component:'',meta:{title:'您没有获取到任务菜单权限，请联系管理员',icon:'bug'}}],
        icon:'bug'
      }],
    };
  },
  mounted() {
    getRouters().then(resp=>{
      if (resp.code =='200'){
        this.menus = resp.data
      }
    })
  },
  methods: {
    goto(parten,children){
      this.$router.push(
        {path: parten.path +'/'+children.path}
      )
    },
    gotoweb(data){
      window.open(data.path)
    },
  }
};
</script>

<style scoped lang="scss">
.menu{
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: conic-gradient(#A9C9FF 0deg 120deg, #FFBBEC 120deg 210deg, #c2ff9f 210deg 300deg, #A9C9FF 300deg 360deg);

}

.lang{
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.99);
  text-align: center;
}
.button{
  cursor: pointer;
  font-size: x-large;
  margin: 0.2rem;
  place-items: center;
  border-radius: 10px;
  padding: 0.05rem;
  backdrop-filter: blur(12px); /* 对元素背景进行模糊 */
   //-webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25); /* 设置元素投射出的阴影 */
  border: solid 1px rgba(255, 255, 255, 0.1);  /* 设置元素边框 */
}
.button:hover{
  color: lightgreen;
}

</style>

